<template>
  <div>
    <button @click="handleClick" @mouseenter="handleEnter" @mouseleave="handleLeave">
      <svg viewBox="0 0 24 24" class="svg1" xmlns="http://www.w3.org/2000/svg" data-v-7c16f05c="">
        <path
          d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z"
          data-v-7c16f05c=""></path>
      </svg>
      <span class="text">立即注册享福利</span>
      <span class="circle"></span>
      <svg viewBox="0 0 24 24" class="svg2" xmlns="http://www.w3.org/2000/svg" data-v-7c16f05c="">
        <path
          d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z"
          data-v-7c16f05c=""></path>
      </svg>
    </button>
  </div>
</template>

<script setup lang="ts">

const handleClick = (e: any) => {
  e.stopPropagation()
  const button = document.querySelector('button')
  if (button) {
    button.style.boxShadow = '0 0 0 0.5vw #7ed6d6'
    setTimeout(() => {
      button.style.boxShadow = '0 0 0 2vw transparent'
    }, 300)
  }
}

const handleEnter = () => {
  const button = document.querySelector('button')
  if (button) {
    button.style.boxShadow = '0 0 0 0.5vw #7ed6d6'
    setTimeout(() => {
      button.style.boxShadow = '0 0 0 2vw transparent'
    }, 100)
  }
}

const handleLeave = () => {
  const button = document.querySelector('button')
  if (button) {
    button.style.boxShadow = '0 0 0 0.5vw #7ed6d6'
  }
}

document.body.addEventListener('click', () => {
  const button = document.querySelector('button')
  if (button) {
    button.style.boxShadow = '0 0 0 0.5vw #7ed6d6'
  }
})
</script>

<style scoped>
* {
  box-sizing: border-box;
}

button {
  border-radius: 8vw;
  line-height: 1.15;
  font-family: "AlimamaShuHeiTi", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #7ed6d6;
  background-color: white;
  padding: 2vw 4vw;
  border: 1vw solid white;
  display: flex;
  justify-items: center;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  box-shadow: 0 0 0 0.5vw #7ed6d6;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  outline: none;

  .text {
    font-size: 5vw;
    font-weight: 600;
    position: relative;
    width: 50vw;
    transform: translate(-2vw);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 1;
  }

  .circle {
    background-color: #7ed6d6;
    border-radius: 50%;
    height: 1px;
    width: 1px;
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  }

  svg {
    position: absolute;
    width: 6vw;
    fill: #7ed6d6;
    z-index: 2;
  }

  .svg1 {
    left: -25%;
    transition: all 0.6s;
  }

  .svg2 {
    right: 7vw;
    transition: all 0.6s;
  }
}

button:active {
  transform: scale(0.95);
}

button:hover {
  border-radius: 4vw;
  color: white;
}

button:hover .text {
  transform: translate(2vw);
}

button:hover .svg2 {
  right: -25%;
}

button:hover .svg1 {
  left: 7vw;
}

button:hover svg {
  fill: white;
}

button:hover .circle {
  opacity: 1;
  height: 70vw;
  width: 70vw
}
</style>